<template>
  <!--系列课堂-->
  <div class="series-container" v-if="seriesCslassroom">
    <div class="sticky-element" ref="stickyElement">
      <div class="serise-cslassroom">
        <img src="@/assets/images/zxjt/juxing.png" alt="">
        <span>系列课程</span>
        <div class="select-right" @click="clickSelectRight">
            <p>{{selectLeft}}</p>
            <img src="@/assets/images/zxjt/xiala.png" class="select-img" alt="">
        </div>
        <div class="select-right-down" v-if="isSelectRight">
          <ul>
            <li :class="[curLeftSelectNum==index?'curLeftSelect':'']" @click="clickSelectOption(v,index)"
              v-for="(v,index) in tabsParam" :key="index">{{v.value}}</li>
          </ul>
      </div>
    </div>
  
    <div id="taber" v-if="firstShow">
      <div id="tabers">
        <van-tabs v-model="active" @click="swithTabs" :swipe-threshold="3" ellipsis="false" :swipeable="true"  class="vant-tab-wrap">
          <van-tab v-for="(item,index) in titleList" :key="index" :name="item.id">
            <template #title>
              <span
                :style="active=== item.id?'color:#FE5900;font-weight:500;font-size:1rem':'color:#666666;font-size:14px;'">
                {{item.title}}
              </span>
            </template>
          </van-tab>
        </van-tabs>
        <!-- <div :class=" isFixed ?'collapse-container-fixed':'collapse-container'" :style="{background:(isOpacity?'none':'#ffffff')}"> -->
        <div v-if="!isFixed" class="collapse-container" :style="{background:(isOpacity?'none':'#ffffff')}">
          <ul class="collapse-list" v-show="isShow">
            <li v-for="(v,i) in titleList" :key="v.id" :class="{active:active==v.id}" @click="getNum(i,v.id)">{{v.title}}</li>
          </ul>
          <van-icon :name="isShow?'arrow-up':'arrow-down'" :class="isShow?'':''" @click="btnShow"/>
        </div>
      </div>
    </div>
  </div> 
    <div class="cateType-list" :style="{display:cateTypeList.length > 1 ? 'block' : 'none'}">
      <ul>
        <li :class="[cateTypeItemClick == index ? 'cateType-item-click' : '']" v-for="(item,index) in cateTypeList"
          :key="index" @click="clickCateTypeItem(item,index)">
          {{item.title}}
        </li>
      </ul>
    </div>
    <div class="calassroom-container">
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="loadMore" :immediate-check="false"
        :offset="20">
        <div v-for="(item,index) in cslassroomList" :key="index" class="cslassroomList-item" @click="clickItem(item)">
          <div class="item-left">
            <img :src="item.imagUrl+'?x-oss-process=image/resize,m_fixed,h_200,w_330'" alt="">
          </div>
          <div class="item-right">
            <div>
              <p class="item-right-top">{{item.title}}</p>
              <p class="item-right-middle">{{item.subTitle}}</p>
            </div>
            <div class="item-right-bottom">
              <div>
                <img src="@/assets/images/zxjt/huifang.png">
                <span>{{item.fwCount}}</span>
              </div>
            </div>
          </div>
        </div>
      </van-list>
    </div>
    <van-overlay :show="isShow" @click.stop="btnShow1">
      <div v-if= "isFixed" :class="[ $channel === 'zxjtqh'? 'collapse-container-fixed-one':'collapse-container-fixed']" :style="{background:(isOpacity?'none':'#ffffff')}">
          <ul class="collapse-list" v-show="isShow">
            <li v-for="(v,i) in titleList" :key="v.id" :class="{active:active==v.id}" @click.stop="getNum(i,v.id, v.title)">{{v.title}}</li>
          </ul>
          <van-icon :name="isShow?'arrow-up':'arrow-down'" :class="isShow?'':''" @click.stop="btnShow"/>
        </div>
    </van-overlay>
  </div>
</template>

<script>
  export default {
    props:{
      scrollDistance: {  
        type: Number,  
        default: null  
      },
      totalheight:{
        type: Number,  
        default: null  
      }
    },
    data() {
      return {
        active: "",
        titleList: [], //title列表
        cateTypeList: [], //tab标签的分类
        curLeftSelectNum: 0,
        cateTypeItemClick: 0,
        selectLeft: '按最新',
        isSelectRight: false, //右边下拉框是否显示
        tabsParam: [{
            value: '按最新',
            type: ''
          },
          {
            value: '按最热',
            type: 'pv'
          }
        ],
        p: 1, //页数
        sel: '', //传值的最热还是最新
        pType: '', //tabs标签
        cateType: '', //标签下的分类id
        isFixed:false,
        loading: false,
        finished: false,
        refreshing: false,
        cslassroomList: [], //数据列表
        firstShow: true, //在所有数据为空的时候标题是否显示
        seriesCslassroom: false, //第一次加载是否显示
        isOpacity:false,
        isShow: false,
        active1:0,
        isToggle:false,
        tabs:''//用于打点
      }
    },
    watch: {    
    // 监听scrollDistance属性的变化    
    scrollDistance(newVal) {    
      if(newVal>this.totalheight+30){ 
         this.isToggle = true
         //吸顶
          this.$refs.stickyElement.classList.add('sticky');   
          if (this.$refs.stickyElement.classList.contains('nosticky')) {      
            this.$refs.stickyElement.classList.remove('nosticky');      
          } 
      }else{ 
        //this.isToggle = false;
        if(!this.isToggle)  return
        this.isToggle = false;
         //还原    
          this.$refs.stickyElement.classList.add('nosticky');    
          if (this.$refs.stickyElement.classList.contains('sticky')) {      
            this.$refs.stickyElement.classList.remove('sticky');      
          }
      }    
    }    
    },  
    mounted(){  
    },
    created() {
      this.getHomeVideoType();
    },
    methods: {
      // 面板列表
      getNum(i,id,title) {
        this.active1 = i;
        this.isFixed= false
       // this.isShow = false
        this.isShow = !this.isShow;
        this.isOpacity = this.isShow ? false:true
        this.p = 1;
        this.titleList.forEach(item => {
          if (id == item.id) {
            this.cateTypeList = item.children; //切换标签时吧父级标签的子集标签赋值
            this.cateTypeItemClick = 0; //每次切换标签时让二级标签默认选中第一个样式
            if (this.cateTypeList && this.cateTypeList.length > 0) {
              this.cateType = this.cateTypeList[0].id; //切换父级标签页时 默认选中第一个
            }
          }
        })
        if (id == "") {
          this.pType = "";
          this.cateType = "";
        }
        // 切换标签页 并且请求该标签下的数据列表
        if (id == null || id == "") {
          this.pType = "";
        } else {
          this.pType = id;
        }
        if (this.sel == null) {
          this.sel = "";
        }
        if (this.cateType == null) {
          this.cateType = "";
        }
        this.loading = false;
        this.finished = false;
        this.getData(this.sel, this.pType, this.cateType)
        this.active = id;
        this.tabs = title//tab打点用
        this.tabClickDot(title)
      },
      // 右三角展示
      btnShow() {
        const targetPosition = this.totalheight+30; // 目标位置  
        this.$emit('scrollToone', targetPosition);
        this.isShow = !this.isShow;
        this.isOpacity = this.isShow ? false:true;
        this.isFixed=!this.isFixed;
      },
      btnShow1(){
        this.isShow = !this.isShow;
        this.isOpacity = this.isShow ? false:true
        this.isFixed=!this.isFixed;
      },
      // 锚点部分滚动
      scrollTop(e) {
        this.isFixed = e.isFixed;
      },
      getHomeVideoType() {
        // 获取tabs标签列表
        this.$http.get('/h5live/getHomeVideoType').then(res => {
          let {
            data,
            code
          } = res.data;
          if (code == "000000") {
            this.titleList = data;
            if (data.length > 0) {
              this.active = this.titleList[0] && this.titleList[0].id;
              this.cateTypeList = this.titleList[0] && this.titleList[0].children; //切换标签时吧父级标签的子集标签赋值
              this.pType = data[0].id
              if (data[0].children.length) {
                this.cateType = data[0].children[0].id
                if (data[0].children[0].id == null) {
                  this.cateType = ''
                }
              }
              this.getData(this.sel, this.pType, this.cateType, 1)
            } else {
              this.getData(this.sel, this.pType, this.cateType, 1)
            }
          }
        }).catch(function(error) {
          console.log(error);
        });
      },
      swithTabs(id) {
        this.p = 1;
        this.titleList.forEach(item => {
          if (id == item.id) {
            this.tabs = item.title//用于打点
            this.tabClickDot(item.title)
            this.cateTypeList = item.children; //切换标签时吧父级标签的子集标签赋值
            this.cateTypeItemClick = 0; //每次切换标签时让二级标签默认选中第一个样式
            if (this.cateTypeList && this.cateTypeList.length > 0) {
              this.cateType = this.cateTypeList[0].id; //切换父级标签页时 默认选中第一个
            }
          }
        })
        if (id == "") {
          this.pType = "";
          this.cateType = "";
        }
        // 切换标签页 并且请求该标签下的数据列表
        if (id == null || id == "") {
          this.pType = "";
        } else {
          this.pType = id;
        }
        if (this.sel == null) {
          this.sel = "";
        }
        if (this.cateType == null) {
          this.cateType = "";
        }
        this.loading = false;
        this.finished = false;
        this.getData(this.sel, this.pType, this.cateType)
      },
      clickSelectRight() {
        // 点击右侧选项
        this.isSelectRight = !this.isSelectRight;
      },
      clickSelectOption(v, index) {
        // 右侧按照分类请求数据
        this.cslassroomList = []; //数组清空
        this.selectLeft = v.value; //赋值右边默认值
        this.curLeftSelectNum = index; //下拉下标样式控制
        this.sel = v.type; // 赋值最新最热类型
        this.isSelectRight = false; //关闭下拉列
        this.p = 1;
        this.getSeruesCslassroomList()
        this.functionDot(v.value)//中信建投功能打点
      },
      clickCateTypeItem(item, index) {
        this.cateTypeItemClick = index; //下拉下标样式控制
        this.cateType = item.id; //赋值给标签下分类的id
        this.p = 1;
        this.getData(this.sel, this.pType, this.cateType)
      },
      getSeruesCslassroomList() {
        // 获取课堂列表值
        this.getData(this.sel, this.pType, this.cateType)
      },
      getroadList() {
        let data = {
          p: this.p, //页数
          sel: this.sel, // 为空就是最新的  pv就是最热的
          pType: this.pType, //父级分类
          type: this.cateType, //标签id
        }
        this.$http.get('/h5live/getHomeVideo', {
          params: data
        }).then(res => {
          if (res.data.code == "000000") {
            let rows = res.data.data; //请求返回当页的列表
            this.loading = false;
            //如果列表数据条数==0，不再触发滚动加载
            if (rows.length == 0) {
              this.finished = true;
            } else {
              // 将新数据与老数据进行合并
              this.cslassroomList = this.cslassroomList.concat(rows);
            }
          }
        }).catch(function(error) {
          console.log(error);
        });
      },
      loadMore() {
        this.p++;
        this.finished = true;
        this.getroadList();
      },

      // 获取数据列表
      getData(sel, pType, type, number,value) {
        let data = {
          p: this.p, //页数
          sel: sel, // 为空就是最新的  pv就是最热的
          pType: pType, //父级分类
          type: type, //标签id
        }
        this.$http.get('/h5live/getHomeVideo', {
          params: data
        }).then(res => {
          if (res.data.code == "000000") {
            this.cslassroomList = res.data.data;
            if (this.cslassroomList.length > 0) {
              this.seriesCslassroom = true;
              this.finished = false;
            }
            if (number == 1 && res.data.data.length == 0) {
              this.seriesCslassroom = false;
              this.firstShow = false;
            }
          }
        })
      },
      //每一项的跳转
      clickItem(item) {
        this.LiveRoomClickDot(item.id,item.title,item.status,item.creator)
        this.$router.push(`/${this.$channel}/liveBack/${item.id}?dzhPage=true`);
      },
      //中信建投功能埋点
      functionDot(functionName) {
        if (this.$channel !== 'zxjt') return
        $sensorsTrack('liveBroadcast_liveRoomDetailsPageFunctionClick',
          {
            page_name: '首页',
            module_name:'系列课程',
            function_name: functionName
          }
        );
      },
      //直播间点击埋点
      LiveRoomClickDot(roomId, roomName, roomStatus, roomCreator) {
        if (this.$channel !== 'zxjt') return
        $sensorsTrack('liveBroadcast_liveRoomClick',
          {
            page_name: '首页',
            module_name: '系列课程',
            tab_name:this.tabs,
            user_nickname: localStorage.getItem("userNickName"),
            live_room_id: roomId,
            live_room_name: roomName,
            live_room_status: roomStatus == '1' ? '直播中' : roomStatus == '0' ? '预告' : '回看',
            live_room_creator: roomCreator
          }
        );
      },
      tabClickDot(tabs) {
        if (this.$channel !== 'zxjt') return
        $sensorsTrack('liveBroadcast_tabClick',
          {
            page_name: '首页',
            module_name: '系列课程',
            tab_name: tabs,
          }
        );
      }
    }
  }
</script>

<style scoped="scoped" lang="less">
  .collapse-container {
    position: absolute;
    left: 0;
    right: 0;
    top: 120px;
    display: flex;
    z-index: 9;
  }
  .collapse-container-fixed-one {
    position: fixed;
    right: 0;
    left: 0;
    top: 0;
    padding-top: 50px;
    background-color: rgb(255, 255, 255) !important;
    display: flex;
    z-index: 99;
    .collapse-list {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      justify-content: flex-start;
      width: calc(100vw - 60px);
      padding:0 20px;
      background-color: white;
      margin-top: 20px;
      li {
        width: auto;
        padding: 8px 20px;
        text-align: center;
        margin-bottom: 20px;
        line-height: normal;
        font-size: 26px;
        font-weight: 400;
        color: #343434;
        &.active {
            background: #f5f5f5;
            border-radius: 20px;
            color: #FE5900;
            font-size: 30px;
            font-weight: 500;
        }
        }
    }
    .van-icon {
      padding-top: 52px;
      padding-right: 35px;
      /* padding-bottom: 25px !important; */
      color: #cdcdcd;
      position: absolute;
      right: 10px;
      top: 25px;
    }
  }
  .collapse-container-fixed {
    position: fixed;
    right: 0;
    left: 0;
    top: 0;
    background-color: rgb(255, 255, 255) !important;
    display: flex;
    z-index: 99;
    .collapse-list {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      justify-content: flex-start;
      width: calc(100vw - 60px);
      padding:0 20px;
      background-color: white;
      margin-top: 100px;
      li {
        width: auto;
        padding: 8px 20px;
        text-align: center;
        margin-bottom: 20px;
        line-height: normal;
        font-size: 26px;
        font-weight: 400;
        color: #343434;
        &.active {
            background: #f5f5f5;
            border-radius: 20px;
            color: #FE5900;
            font-size: 30px;
            font-weight: 500;
        }
        }
    }
    .van-icon {
      padding-top: 10px;
      padding-right: 35px;
      /* padding-bottom: 25px !important; */
      color: #cdcdcd;
      position: absolute;
      right: 10px;
      top: 105px;
    }
  }
  .van-icon {
    padding-top: 10px;
    padding-right: 35px;
    /* padding-bottom: 25px !important; */
    color: #cdcdcd;
    position: absolute;
    right: 10px;
  }
  .series-container {
    position: relative;
  }

  /* 系列课程 */
  .serise-cslassroom {
    position: relative;
    padding: 60px 30px 0 0px;
    img {
    height: 19px;
    vertical-align: bottom;
    }
    span {
      position: absolute;
      bottom: 9px;
      left: 0;
      font-size: 36px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #333333;
    }
  }
  #taber {
    display: flex;
    justify-content: flex-start;
    margin-top: 28px;
    align-items: center;
  }

  #tabers {
    width: calc(84.93% - 46px);
    height: 45px;
  }
  .vant-tab-wrap/deep/ .van-tabs__wrap--scrollable .van-tabs__nav{
    background-color: rgba(255,255,255,0);
  }
  .calassroom-container/deep/ .van-list__finished-text {
    margin-top: 60px !important;
    font-size: 24px;
    padding-right: 33px;
  }

  /deep/#tabers .van-tab {
    flex: none !important;
  }

  /deep/#tabers .van-tab:not(:nth-child(1)) {
    margin-left: 36px;
  }

  .cateType-list {
    padding-left: 30px;
    margin-top: 22px;
    width: 100%;
    height: 50px;
    overflow-x: scroll;
  }
  .cateType-list ul{
    display: flex;
    height: 100%;
    align-items: center;
    flex-wrap: nowrap;
  
  }
  .cateType-list ul li {
    font-size: 26px;
    height: 40px;
    line-height: 40px;
    color: rgba(102, 102, 102, 1);
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    /* border: 1px solid #ACACAC; */
    background-color:rgba(245, 245, 245, 1) ;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    padding: 0 10px;
  }

  .cateType-list ul li:not(:nth-child(1)) {
    margin-left: 22px;
  }

  .cateType-item-click {
    background: #FE5900 !important;
    border: 1px solid #FE5900 !important;
    font-size: 26px !important;
    font-weight: 500 !important;
    color: #FFFFFF !important;
  }

  .van-list {
    min-height: 20vh;
    padding-left: 30px;
  }

  .select-right {
    width: 15.07%;
    height: 100%;
    position: relative;
    position: absolute;
    right: 20px;
    top: 0px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    font-size: 22px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #FE5900;
    padding-left: 5px;
  }

  /* .select-right::before {
    position: absolute;
    left: 0;
    content: '';
    display: inline-block;
    height: 20px;
    width: 2px;
    background: #ACACAC;
  } */

  .select-right-down {
    width: 115px;
    height: 120px;
    position: absolute;
    top: 60px;
    right: 16px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 1px 1px 6px 0px rgba(0, 0, 0, 0.18);
    border-radius: 8px;
    z-index: 10;
  }

  .select-right-down ul li {
    width: 85px;
    height: 62px;
    font-size: 0.875rem;
    color: #666666;
    text-align: center;
    line-height: 60px;
    margin: 0 auto;
  }

  .select-right-down ul li:first-child {
    border-bottom: 2px solid #F3F3F3;
  }

  .curLeftSelect {
    color: #FE5900 !important;
  }

  .select-img {
    width: 12px;
    height: 12px;
    position: absolute;
    bottom: 0;
    right: 0;
    /* top: calc(50% - 4px); */
  }

  .calassroom-container {
    margin-top: 37px;
  }

  .cslassroomList-item {
    height: 200px;
    display: flex;
    justify-content: center;
  }

  .calassroom-container .cslassroomList-item:not(:nth-child(1)) {
    margin-top: 40px;
  }

  .item-left {
    width: 330px;
    height: 200px;
    flex: 1;
  }

  .item-left img {
    width: 100%;
    height: 100%;
    border-radius: 10px;
  }

  .item-right {
    flex: 1;
    display: flex;
    padding: 0 0 0 30px;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
  }

  .item-right-top {
    font-size: 32px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 45px;
    letter-spacing: 1px;
    width: 330px;
    overflow: hidden;
    text-overflow: ellipsis;
    /* 转成webkit盒子 */
    display: -webkit-box;
    /* 设置对齐模式 */
    -webkit-box-orient: vertical;
    /* 设置需要的行数 */
    -webkit-line-clamp: 2;
  }

  .item-right-middle {
    width: 286px;
    font-size: 24px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
    line-height: 33px;
    letter-spacing: 1px;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .item-right-bottom {
    display: flex;
    font-size: 22px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
    line-height: 30px;
  }

  .item-right-bottom img {
    width: 34px;
    height: 32px;
    vertical-align: middle;
  }

  .item-right-bottom-position {
    margin-left: 20px;
  }
  @keyframes slideDown {  
    0% {  
        transform: translateY(-150px);  
    }  
    100% {  
        transform: translateY(0px);  
    }  
  } 
 @keyframes fadeOut {  
    0% {  
        background-color: #FFFFFF;   
    }  
    100% {  
        background-color: transparent;   
    }  
} 
  .sticky {  
    /* position: fixed;  
    top: 0;  
    left: 0;  
    right: 0;  
    z-index: 100; */
    position: sticky;
    background-color: #FFFFFF;
    animation: 0.5s ease-out 0s 1 slideDown;  
 }
 .nosticky{
    background: transparent;
    animation: 0.2s ease-out 0s 1 fadeOut;  
 }
  .sticky-element{
    padding-left: 30px;
    top: -0.5px;
  }
</style>
